/
config.base.js
159 lines (139 loc) · 5.71 KB
/
config.base.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
/* eslint-disable */
const path = require('path');
const webpack = require('webpack');
// When MiniCssExtractPlugin becomes stable and supports all options, convert if needed
const ExtractCssChunks = require('extract-css-chunks-webpack-plugin');
const BundleTracker = require('webpack-bundle-tracker');
const autoprefixer = require('autoprefixer');
const getLocalIdent = require('css-loader/lib/getLocalIdent');
// The app/ dir
const app_root = path.resolve(__dirname, '..');
// The django app's dir
const project_root = path.resolve(app_root, '..');
// Enable deprecation warnings
process.traceDeprecation = true;
function makeConfig(options) {
const mode = options.mode || 'none';
const output = {
path: path.resolve(app_root, 'build'),
filename: options.filenameTemplate + '.js',
chunkFilename: options.filenameTemplate + '.chunk.js',
publicPath: options.publicPath,
library: '{{cookiecutter.repo_name}}',
hashFunction: 'sha512',
hashDigestLength: 32,
};
return {
entry: {
app: options.prependSources.concat(['@babel/polyfill', 'main.js']),
styles: options.prependSources.concat([path.resolve(project_root, 'static', 'styles-src', 'main.js')]),
},
mode,
output,
module: {
rules: [{
test: /\.js$/, // Transform all .js files required somewhere with Babel
exclude: /node_modules/,
use: 'babel-loader',
}, {
test: /\.(css|scss)$/,
include: [
// CSS modules should only be generated from css/scss files within the src directory
path.resolve(app_root, 'src'),
// Global stylesheets in the static directory do not generate modules
path.resolve(project_root, 'static'),
],
use: [
// When MiniCssExtractPlugin becomes stable and supports all options, convert if needed
ExtractCssChunks.loader,
{
loader: 'css-loader',
options: {
sourceMap: true,
modules: true,
importLoader: 1,
localIdentName: '[path][name]__[local]--[hash:base64:5]',
getLocalIdent: (loaderContext, localIdentName, localName, options) => {
// Everything that comes from our global style folder and node_modules will be in global scope
if (/styles-src|node_modules/.test(loaderContext.resourcePath)) {
return localName;
}
return getLocalIdent(loaderContext, localIdentName, localName, options);
},
},
}, {
loader: "postcss-loader",
options: {
plugins: function() {
return [autoprefixer]
},
},
}, {
loader: "resolve-url-loader",
}, {
loader: "sass-loader",
options: {
sourceMap: true,
includePaths: [
path.resolve(project_root, 'static', 'styles-src'),
],
outputStyle: 'expanded',
}
},
],
}, {
test: /\.(jpe?g|png|gif|svg|woff2?|eot|ttf)$/,
loader: 'url-loader',
query: {
limit: 2000,
name: 'assets/[name].[hash].[ext]',
},
}],
},
plugins: [
// When MiniCssExtractPlugin becomes stable and supports all options, convert if needed
new ExtractCssChunks({
filename: options.filenameTemplate + '.css',
chunkFilename: options.filenameTemplate + '.chunk.css',
}),
new BundleTracker({
path: __dirname,
filename: '../webpack-stats.json',
indent: 2,
logTime: true,
}),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV), // Inject environmental variables to client side
}),
].concat(options.plugins),
optimization: {
namedModules: options.namedModules,
minimize: options.minimize,
splitChunks: {
chunks: 'all',
name : false,
cacheGroups: {
default: false,
vendors: {
name: 'vendors',
test: /node_modules/, // Include all assets in node_modules directory
reuseExistingChunk: true,
enforce: true,
chunks: 'initial',
minChunks: 1,
},
},
},
runtimeChunk: 'single',
},
resolve: {
modules: ['app/src', 'node_modules'],
extensions: ['.js'],
},
devtool: options.devtool,
target: 'web', // Make web variables accessible to webpack, e.g. window
// stats: false, // Don't show stats in the console
performance: options.performance,
};
}
module.exports = makeConfig;